<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
<title>New Event</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.timepicker.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" href="css/main.css" />

<script type="text/javascript">
$(function(){
	$('#startdate').datepicker({
		onSelect:function(dateText,inst){
			$('#endDate').datepicker("option","minDate",dateText);
			$('#answerDate').datepicker("option","maxDate",dateText);
		},
		dateFormat:"dd-mm-yy"
	});
});
</script>

<script>
$(function() {
			$('.datepicker').datepicker({
				dateFormat:"dd-mm-yy"
			});
	});
</script>

<script>
$(function(){
	$('.timepicker').timepicker({
	    showPeriod: false,
	    showPeriodLabels: false,
	    showLeadingZero: false
	});
});
</script>


<script>
$(function(){
	$('#endcheck').click(function(){
		if($(this).attr("checked")){
			$('#endDate').removeAttr("disabled");
			$('#endTime').removeAttr("disabled");
		}else{
			$('#endDate').attr("disabled",true);
			$('#endTime').attr("disabled",true);
			
		}
	});
});
</script>

<script>
$(function(){
	$('#checkAll').click(function(){
		if($(this).attr("checked")){
			$(':checkbox[name="contact"]').attr("disabled",true);
			$(':checkbox[name="contact"]').attr("checked",true);
		}else{
			$(':checkbox[name="contact"]').attr("checked",false);
			$(':checkbox[name="contact"]').removeAttr("disabled");
		}
	});
});
</script>

<script>
	function enableCheck(){
		$(':checkbox[name="contact"]').removeAttr("disabled");
	}
</script>

<script>
$(function(){
	$('#answercheck').click(function(){
		if($(this).attr("checked")){
			$('#answerDate').removeAttr("disabled");
			$('#answerTime').removeAttr("disabled");
		}else{
			$('#answerDate').attr("disabled",true);
			$('#answerTime').attr("disabled",true);
			
		}
	});
});
</script>


<style type="text/css">
.left {
	float: right;
}

#right {
	width: 50%;
	position: absolute;
	right: 100;
}
</style>
</head>

<body>
<%@ include file="./header.jsp"%>
<form action="./addEvent" method="POST" class="prijavaForma"
	enctype="multipart/form-data" accept-charset="ISO-8859-1" s>
<div class="content">
<div class="fbbluebox" style="width: 500px;">
<table style="width:25me;" class="prijavaTabela" >
	<tr>
		<td style="width:10me">Naslov:</td>
		<td></td>
		<td colspan="2"><input type="text" name="title"></td>
	</tr>

	<tr>
		<td>Opis:</td>
		<td></td>
		<td colspan="2"><TEXTAREA NAME="description" COLS=40 ROWS=6></TEXTAREA></td>
	</tr>

	<tr align="center" style="">
		<td>Vreme pocetka:</td>
		<td></td>
		<td align="left"><input id="startdate" type="text" class="datepicker"
			name="startDate"></td>
		<td><input id="starttime" type="text" class="timepicker"
			name="startTime"></td>
	</tr>

	<tr>
		<td>Mesto:</td>
		<td></td>
		<td><input type="text" class="mesto" name="place"></td>
		<td></td>
<td></td>
	</tr>

	<tr>
		<td>Traje do:</td>
		<td><input type="checkbox" id="endcheck" name="endCheck" value="false"></td>
		<td style="width:9me"><input type="text" class="datepicker" id="endDate"
			name="endDate" disabled="true"></td>
		<td  style="width:9me"><input type="text" class="timepicker" id="endTime"
			name="endTime" disabled="true"></td>
			<td></td>
	</tr>

	<tr>
		<td>Slika</td>
		<td></td>
		<td colspan="2"><input type="file" name="file"></td>
		<td></td>
	</tr>

	<tr>
		<td>Vreme za prijavu:</td>
		<td><input type="checkbox" id="answercheck" name="answerCheck" value="false"></td>
		<td><input  size="20" type="text" class="datepicker" id="answerDate"
			name="answerDate" disabled="true"></td>
		<td><input type="text" class="timepicker" id="answerTime"
			name="answerTime" disabled="true"></td>
			<td></td>
	</tr>
	<tr>
	<td><input type="submit" name="submit" onclick="enableCheck()" value="dodaj"></td>
	</tr>



</table>
</div>
</div>
<div class="content2">
Contacts:
<table>
<div class="fbgrey" style="background-color: #F7F7F7;font-size: 13px;width: 550px;">
<tr>
	<th>First Name</th>
	<th>Last Name</th>
	<th>E-mail</th>
	<th align="right">Check All<input type="checkbox" id="checkAll" name="checkAll" value="false"></th>
</tr>
 <c:forEach items="${contacts}"
	var="contact">
	<tr>
		<td>${contact.firstName}</td>
		<td>${contact.lastName}</td>
		<td>${contact.email}</td>
		<div class="left">
		<td align="right"><INPUT TYPE=CHECKBOX NAME="contact" value="${contact.id}"></td>
		</div>
	</tr>
	
</c:forEach>
</div>
</table>

</form>


</body>
</html>